class Tab{  //类
   constructor(id){  //constructor在new出来一个实例时就自动执行
     this.oBox=document.getElementById(id);
     this.aBtn=this.oBox.getElementsByTagName('input');
     this.aDiv=this.oBox.getElementsByTagName('div');
     this.iNow=0;
     this.init();
   }
   init(){    //为对象添加方法
     for (let i = 0; i < this.aBtn.length; i++) {
       this.aBtn[i].onclick=function(){
         this.hide();    //先循环让所有的都隐藏
         this.show(i);    //再让选择的第i个显示出来
       }.bind(this);    //bind(this)进行校正this的值
     }
   }
   hide(){
     for (let i = 0; i < this.aBtn.length; i++) {
       this.aBtn[i].className='';
       this.aDiv[i].style.display='none';
     }
   }
   show(index){
     this.aBtn[index].className='btn';
     this.aDiv[index].style.display='block';
   }
 }
class AutoTab extends Tab{
     constructor(id){
       super(id);  //继承，防止覆盖
       setInterval(this.next.bind(this),1000);
     }
     next(){
       this.iNow++;
       if (this.iNow==this.aBtn.length) {
         this.iNow=0;
       }
       this.hide();
       this.show(this.iNow);
     }
   }


   window.onload=function(){
     var Atotb=new AutoTab('box2');
      var tb = new Tab('box')
   };
